<script setup lang="ts">
import { ref }from'vue';
import { onLoad }from'@dcloudio/uni-app';
import { getSeckillGoodsApi } from '@/apis/seckill';
import type { RegularSeckill } from "@/types/RegularSeckill"

// 接收跳转数据
const query = defineProps<{
  promotionId: number,
}>()


const seckillData = ref<RegularSeckill[]>()
const getSeckillGoods = async() => {
    const res = await getSeckillGoodsApi(query.promotionId)
    seckillData.value = res.data;
    console.log(seckillData.value);
    
}

onLoad(() => {
    getSeckillGoods()
})
</script>

<template>
    <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in seckillData"
      :key="item.skuId"
      :url="`/pages/goods/goods?skuId=${item.skuId}`"
    >
      <image
        class="image"
        mode="aspectFill"
        :src="item.skuDefaultImg"
      ></image>
      <view class="name">{{ item.skuTitle }}</view>
      <view style="display: flex;justify-content: start;align-items:flex-end;">
        <view class="price" style="font-size: 35rpx;">
          <text class="small">¥</text>
          <text>{{ item.seckillPrice }}</text>
        </view>
        <view  class="price" style="color: gray;margin-left: 10rpx;">
          <text class="small">¥</text>
          <text style="text-decoration: line-through;">{{ item.price }}</text>
        </view>
      </view>
    </navigator>
  </view>
</template>

<style lang="scss">
page {
  display: block;
  background-color: #f4f4f4;
}

.guess{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  margin-bottom: 10rpx;
  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 28rpx;
  }
  .small {
    font-size: 80%;
  }
}
</style>